<template>
  <!-- 选择日期 :placeholder="nowDate"-->
  <div class="conditions">
    <span class="title f-mr10">{{title}}</span>
    <i-select v-model="type" style="width:50px;margin-right:5px;" filterable v-if="selectShow" transfer
              placeholder="请输入关键词搜索">
      <i-option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</i-option>
    </i-select>

    <Date-picker
      :type="type"
      :editable="false"
      :value="value[0]"
      :format="format"
      @on-change="dateAChange"
      style="width: 200px"
      transfer
    ></Date-picker>
    <span class="f-ml10 f-mr10">至</span>
    <Date-picker
      :type="type"
      :editable="false"
      :value="value[1]"
      :format="format"
      @on-change="dateBChange"
      style="width: 200px"
      transfer
    ></Date-picker>
  </div>
</template>

<script>
import util from "@/libs/util.js";
export default {
  props: {
    title: {
      type: String,
      default: "比较周期"
    },
    value: {
      type: Array,
      default: []
    },
    disabled: {
      type: String,
      default: null
    },
    type: {
      type: String,
      default: "month"
    },
    typeUpdate: {
      type: String,
      default: "1"
    },
    selectShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      format: "",
      options: [
        {
          label: "年",
          value: "year"
        },
        {
          label: "月",
          value: "month"
        },
        {
          label: "日",
          value: "date"
        },
      ]
    };
  },
  computed: {},
  watch: {
    type(val) {
      this.format = "";
      if (val == "year") {
        this.value[0] = String(Number(util.date.getNowFormatDate("year")) - 1);
        this.value[1] = util.date.getNowFormatDate("year");
      } else if (val == "month") {
        this.value[0] = util.date.getNowFormatDate("year") + "-01";
        this.value[1] = util.date.getNowFormatDate("month");
      } else if (val == "date") {
        this.value[0] = util.date.getNowFormatDate("month") + "-01";
        this.value[1] = util.date.getNowFormatDate("date");
      }
      this.$emit("input", this.value);
      if (this.typeUpdate == "1") {
        this.$emit("type1Update", val);
      } else if (this.typeUpdate == "2") {
        this.$emit("type2Update", val);
      }
    }
  },
  methods: {
    dateAChange(date) {
      this.value[0] = date;
      this.$emit("input", this.value);
    },
    dateBChange(date) {
      this.value[1] = date;
      this.$emit("input", this.value);
    }
  },
  created() {
    if (this.disabled != null) {
      this.options = this.options.filter(item => {
        return item.value != this.disabled;
      });
    }
  },
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
